<template>
	<uni-popup class="pop" ref="popupRef" type="bottom" :animation="true">
		<view class="pop-content" :style="{ marginBottom: '-' + safeBottom + 'px'}">
			<view class="header">
				<view>
				</view>
				<text></text>
				<image @click="closePop"
					src="https://img.js.design/assets/img/6182473b46044cfbbf3e9dfc.png#9df8c2e09d3f6e5fe6a902838e7a3573"
					mode=""></image>
			</view>
			<view class="container-content">
				<image :src=" imageUrl + PersonInfo.leader_image" mode=""></image>
				<text>【{{PersonInfo.leader_name}}】</text>
			</view>
			<view class="text-box">
				<view class="tag">
					{{PersonInfo.leader_title}}
				</view>
				<view class="description">
					{{PersonInfo.leader_desc}}
				</view>
			</view>
			<view class="footer">
				部分摄影师简介,具体摄影师根据团期协调如有拍摄好看的照片，我们可能会用于宣传哟~
			</view>

		</view>
	</uni-popup>
</template>

<script setup>
	import { imageUrl } from '../../../config/request/request';
	import {
		ref
	} from 'vue';
	import {
		safeBottom
	} from '@/config/systemInfo.js'
	const props = defineProps({
		PersonInfo: {
			type: Object,
			default: {}
		}
	})
	const popupRef = ref(null);
	// 子组件方法
	const emits = defineEmits([])
	const closePop = () => {
		popupRef.value.close();
	}
	// 暴露方法给父组件
	const exposeMethods = {
		showPopup: () => {
			popupRef.value.open();
		},
		closePopup: () => {
			popupRef.value.close();
		}
	};
	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
	.pop-content {
		font-family: "仓耳渔阳体 W05";
		/* 添加样式 */
		background: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		/* padding: 86rpx 296rpx 80rpx 296rpx; */
	}

	.header {
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		height: 43rpx;
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header image {
		width: 44rpx;
		height: 44rpx;
	}

	.container-content {
		width: 90%;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
		gap: 50rpx;
	}

	.container-content image {
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
	}

	.text-box {
		width: 90%;
		margin: 40rpx auto;
	}

	.text-box .description {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.text-box .tag {
		font-size: 32rpx;
		font-weight: 500;

	}

	.footer {
		margin: 0 auto;
		width: 50%;
		font-size: 20rpx;
		font-weight: 400;
		text-align: center;
		padding: 100rpx 0 50rpx 0;
		box-sizing: border-box;
		color: #a6a6a6;
	}
</style>